<template>
    <div style="border-top: 1px solid #f3f3f3;padding:20px 0;">
        <div class="order-info">
            <img :src="checkedObj?.productImg" />
            <div class="title">{{ checkedObj?.description || checkedObj?.productName }}</div>
            <div class="price">单价：<span>{{ checkedObj?.price }}</span></div>
            <div class="count">数量：<el-input-number v-model="productQty" @change="handleChange" size="small" :min="1"
                    :max="1000" label="描述文字"></el-input-number></div>
            <div class="total">小计：<span>{{ price }}</span></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'OrderInfo',
    components: {

    },
    mixins: [],
    props: ['checkedObj', 'num'],
    data() {
        return {
            productQty: this.num || this.checkedObj.productQty,
        }
    },
    computed: {
        price() {
            return (this.checkedObj?.price * this.productQty).toFixed(2)
        }
    },
    watch: {

    },
    mounted() {
    },
    methods: {
        handleChange(count) {
            // 下单一个商品
            this.$emit('chuangProductQty', count)
            // 下单多个商品
            const obj = {
                id: this.checkedObj.id,
                productId: this.checkedObj.productId,
                productQty: count
            }
            this.$emit('moreGoods', obj)
        },

    }
};
</script>
<style lang='less' scoped>
.order-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #7f7f7f;

    img {
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }

    .title {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-wrap: nowrap;
    }

    .price {
        width: 300px;
        padding-left: 40px;

        span {
            font-weight: bold;
        }
    }

    .count {
        width: 300px;
    }

    .total {
        width: 300px;

        span {
            color: red;
            font-weight: bold;
        }
    }
}
</style>